/*专家组设置 */
<template>
  <div>
    <div v-if="indexKey === 1">
      <condition-card @reset="resetSearch" @search="onSearch" label-position="right" label-width="150px">
        <el-row :gutter="24" style="height: 50px;">
          <el-col :span="8">
            <el-form-item :label="$t('expertGroupSett.compellat')">
              <el-input v-model.trim="queryForm.condition.specialistName" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('expertGroupSett.jobNumber')">
              <el-input v-model.trim="queryForm.condition.specialistWorkId" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('expertGroupSett.college')">
              <DictSelect clearable style="width: 100%" 
                v-model="queryForm.condition.faculty" 
                filterable
                :plzSelect="$t('internship.pleaseSelect')"
                :data="options.faculty" >
              </DictSelect>
            </el-form-item>
          </el-col>
        </el-row>
      </condition-card>
      <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
        <h1 class="condition-title">{{$t('expertGroupSett.listExperts')}}</h1>
          <div class="edu-opertion-bar sub-title">
            <div class="float-right" style="display: flex;">
              <el-button type="primary" style="margin-left:10px" @click="increased">{{$t('expertGroupSett.increased')}}</el-button>
            </div>
          </div>
        <edu-table :pagination="false" :order='false' :selection='false' :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
          <edu-table-column :label="$t('expertGroupSett.compellat')" prop="specialistName"></edu-table-column>
          <edu-table-column :label="$t('expertGroupSett.jobNumber')" prop="specialistWorkId"></edu-table-column>
          <edu-table-column :label="$t('expertGroupSett.college')" prop="faculty">
            <template slot-scope="scope">
              {{ scope.row.faculty | collegeAcademyList(options.faculty)}}
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('common.text.operation')" fit prop="operate">
            <template slot-scope="props">
              <el-button type="text" @click="examineDelete(props.row)">{{$t('expertGroupSett.delete')}}</el-button>
            </template>
          </edu-table-column>
          
        </edu-table>
        <el-row type="flex" class="row-bg" justify="end">
          <el-col>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryForm.pageNum_"
                :page-sizes="[20, 40, 80, 100]"
                :page-size="queryForm.pageSize_"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryForm.total_"
                style="float:right;margin-top:10px"
              ></el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 新增 -->
    <div v-if="indexKey === 2">
      <add-expertGroupAdd @change-exam='changeExam' :compile='compile' :dataList='dataListObj'></add-expertGroupAdd>
    </div>
  </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import expertGroupAdd from './expertGroupSettAdd';
import competiManagementApi from 'common/src/api/subjectCompetition/competiManagement';
export default {
  components: {
    'add-expertGroupAdd': expertGroupAdd
  },
  data() {
    return {
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition: {
          faculty: '',
          specialistWorkId: '',
          specialistName: ''
        }
      },
      indexKey: 1,
      dataList: [],
      multipleSelection: [],
      options: {
        TrainingLevel: [],
        degreeType: [],
        formLearning: [],
        faculty: [],
        profession: [],
        trainingCategory: []
      },
    };
  },
  created() {
    this.getOptions()
  },
  mounted() {
    this.getCompetiManagement(this.queryForm)
  },
  filters: {
    collegeAcademyList(val, array) {
      let str = "";
      for (let item of array) {
        if (val === item.value) {
          str = item.label;
        }
      }
      return str;
    }
  },
  methods: {
    getCompetiManagement(data) {
      competiManagementApi.getListPage(data).then(res => {
        // console.log(res, 'dsfg');
        this.dataList = res.data.list
        this.queryForm.total_ = res.data.total_
      })
    },
    // 字典获取
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_PYCC", 'X_PYLB', 'X_XWLX', 'X_XXXS', 'X_YX']
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            trainingCategory: "X_PYLB",
            degreeType: "X_XWLX",
            formLearning: "X_XXXS",
            faculty: "X_YX",
            TrainingLevel: "X_PYCC"
          },
          res.data,
          this.options
        );
      });
    },
    // 删除
    examineDelete(data) {
      this.$delConfirm().then(() => {
        let list = []
        list.push({id: data.id, deleteFlag: '1'});
        competiManagementApi.postTeacherDelete(list).then(res => {
          this.$message(this.$t('internship.successfully'));
          this.queryForm.pageNum_ = 1;
          this.getCompetiManagement(this.queryForm)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('internship.cancelOpera')
        });  
      });
    },
    // 查询
    onSearch() {
      this.queryForm.pageNum_ = 1
      this.getCompetiManagement(this.queryForm)
    },
    // 重置
    resetSearch() {
      for (let key in this.queryForm.condition) {
        this.queryForm.condition[key] = '';
      }
      this.queryForm.pageNum_ = 1
      this.getCompetiManagement(this.queryForm)
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 新增
    increased() {
      this.indexKey = 2
      this.compile = '新增'
    },
    changeExam(data) {
      if (data) {
        this.indexKey = 1
        competiManagementApi.postTeacherUpdate(data).then(res => {
          this.$message({type: "success", message: this.$t('internship.successfully')});
          this.queryForm.pageNum_ = 1
          this.getCompetiManagement(this.queryForm)
        })
      } else {
        this.indexKey = 1
        this.queryForm.pageNum_ = 1
        this.getCompetiManagement(this.queryForm)
      }
      
    },
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val
      this.queryForm.pageNum_ = 1
      this.getCompetiManagement(this.queryForm)
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.getCompetiManagement(this.queryForm)
    },
  }
}
</script>
<style  scoped>

</style>